<template>
  <el-tabs type="border-card" class="expressInfo-container">
    <el-tab-pane label="包裹1"></el-tab-pane>
    <div class="content">
      <div class="left-view">
        <div>
          货运单号：
          <span>{{ expressObject.expressSn }}</span>
        </div>
        <div>
          快递公司：
          <span>{{ expressObject.expressName }}</span>
        </div>
        <div>
          发货时间：
          <span>
            {{ expressObject.createTime }}
          </span>
        </div>
        <el-button
          v-if="[0, 1, 10, 20].includes(expressObject.orderStatus)"
          type="primary"
          @click="() => (deliverGoods = true)"
        >
          修改物流
        </el-button>
      </div>
      <div class="right-view">
        <el-scrollbar height="350px" :always="true">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in valueModel.expressTrackDtoList"
              :key="index"
              :timestamp="activity.ftime"
            >
              {{ activity.context }}
            </el-timeline-item>
          </el-timeline>
        </el-scrollbar>
      </div>
    </div>
  </el-tabs>
  <deliverGoodsDialog
    v-model:dialogVisible="deliverGoods"
    :orderData="orderDetails"
    :id="id"
    @addSuccess="reload"
  ></deliverGoodsDialog>
</template>
<script lang="ts" setup>
  import { getExpressTypes, queryExpressMessage } from '@/api/modules/shop'
  import { onMountedOrActivated } from '@/hooks/core/onMountedOrActivated'
  import { usePromise } from '@/hooks/core/usePromise'
  import { ref, computed } from 'vue'
  import { useStore } from 'vuex'
  import deliverGoodsDialog from '../deliverGoodsDialog/index.vue'

  const props = defineProps({
    orderDetails: {
      type: Object,
      default() {
        return {}
      },
    },
    id: {
      type: Number,
      default() {
        return {}
      },
    },
  })

  // watch(
  //   () => props.orderDetails,
  //   (val) => {
  //     const { } = val
  //   },
  // )
  const deliverGoods = ref(false)
  const { to } = usePromise()
  const valueModel = ref({
    expressSn: '',
    com: '',
    state: '',
    expressTrackDtoList: [] as any[],
  })

  onMountedOrActivated(async () => {
    const [err, res] = await to(queryExpressMessage({ id: props.id }))
    if (!err) {
      // TODO需要优化成多包裹
      valueModel.value = { ...res.data[res.data.length - 1] }
    }
  })

  const store = useStore()
  const expressName = computed(() => {
    const key: any = valueModel.value.com
    return store.getters.expressTypes[key] || key
  })
  const expressObject = computed(() => {
    const { orderExpresses, orderStatus } = props.orderDetails
    const { expressName, expressSn, expressDetail, createTime } =
      orderExpresses[0]
    return { expressName, expressSn, expressDetail, createTime, orderStatus }
  })
  // 刷新页面
  const emits = defineEmits(['reload'])
  function reload() {
    emits('reload')
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/mixin.scss';
  .expressInfo-container {
    //height: 450px;
    //@include card-shadow;
    //background: white;
    //padding: 22px;
    margin-bottom: 20px;
    .content {
      display: flex;
      .left-view {
        width: 40%;
      }
      .right-view {
        width: 60%;
      }
    }
  }
</style>
